import React,{useState,useEffect} from 'react'
import { Card } from 'antd';
import Picture from "../../components/Picture";
import api from "../../api";
import './Home.css'

export default function Home(){

    const [hot_competition,setHotCompetition]=useState([])
    const [competition_item,setCompetition]=useState([])

    const about_item=[
        {id:'21',title:'about-1'},
        {id:'22',title:'about-2'},
        {id:'23',title:'about-3'},
    ];
    //获取热门比赛
    const getHotCompetition = async ()=>{
        let data=await api.findHotCompetitionApi({})
        if(data.status===200){
            console.log('获取到热门比赛拉')
            setHotCompetition(data.data)
            setCompetition(data.data)
        } else{
            console.log('获取热门比赛出错拉',data)
        }
    };
    //在页面组件第一次挂载时就去获取热门比赛
    useEffect(()=>{getHotCompetition();},[]);
    //处理从接口获取到的数据
    function showData(data,type){
        switch (type){
            case 'hot':
            case 'about':
                return (
                    data.length===0?
                    (<p>没有数据辣</p>):
                    (data.map((item)=>{
                            return(
                                <p key={item.id}>{item.title}</p>
                            )
                        }))
                )
            case 'competition':
                return (
                    data.length===0?
                        (<div className={'first'}><h3>没有数据辣</h3></div>):
                        (data.map((item)=>{
                            return (
                                <a href='https://www.csdn.net/' key={item.id}>
                                    <div className='first'>
                                        <h3>{item.title}</h3>
                                        <p>{item.description}</p>
                                    </div>
                                </a>
                            )
                        }))
                )
            default:
                return (<p>出错拉</p>)
        }
    }

    return (
        <>
            {/*展示首页轮播图*/}
            <Picture/>
            <div className='bot'>
                {/*比赛个体栏*/}
                <div className='b-left'>
                    {showData(competition_item,'competition')}
                </div>
                <div className='b-right'>
                    {/*热门比赛*/}
                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                    <Card title="热门比赛" extra={<a href="#">More</a>} style={{
                            width: 300,
                            marginTop: 30,
                            marginLeft: 20
                        }}>
                        {showData(hot_competition,'hot')}
                    </Card>
                    {/*关于*/}
                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                    <Card size="small" title="关于" extra={<a href="#">More</a>} style={{
                            width: 300,
                            marginTop: 50,
                            marginLeft: 20
                        }}>
                        {showData(about_item,'about')}
                    </Card>
                </div>
            </div>
        </>
    )
}